iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Modern Web

30天前端學習筆記心得系列 第 9

Day9-Html項目列表清單

  • 分享至 

  • xImage
  •  

這篇來寫在Html項目列表清單所使用的標籤

<ul> <ol> <li>

<ul> 無順序列表清單
<ol> 有順序列表清單
<li> 清單項目

無序列表(unordered lists)

<ul>
  <li>蘋果</li>
  <li>檸檬</li>
  <li>橘子</li>
</ul>
  • 蘋果
  • 檸檬
  • 橘子

清單建立三個項目,不需要順序

有序列表(ordered lists)

<ol>
  <li>蘋果</li>
  <li>檸檬</li>
  <li>橘子</li>
</ol>
  1. 蘋果
  2. 檸檬
  3. 橘子

清單建立三個項目後,排順序第一蘋果、第二檸檬、第三橘子

多階層列表(nested lists)

當我們想要建立更多項目內容,我們可以使用這列表

<ul>
  <li>水果</li>
  <li>蔬菜</li>
    <ol>
      <li>花椰菜</li>
      <li>高麗菜</li>
    </ol>
</ul>

https://ithelp.ithome.com.tw/upload/images/20230924/201632573E1K1eg06W.jpg

<nav>網頁瀏覽連結

這時我們還可以用項目標籤去做連結,可以瀏覽網站頁內內容和其他網站

網站頁內導覽

需要做Html檔案去連結

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Message</a></li>
  </ul>
</nav>

https://ithelp.ithome.com.tw/upload/images/20230924/201632574gUoEvPO06.jpg

或連結其他網站

<nav>
  <ul>
    <li><a href="https://www.google.com.tw/?hl=zh_TW">Google</a></li>
    <li><a href="https://tw.yahoo.com/">Yahoo</a></li>
    <li><a href="https://zh-tw.facebook.com/">Facebook</a></li>    
</nav>

https://ithelp.ithome.com.tw/upload/images/20230924/20163257JwsRDReZzk.jpg

定義列表 (definition lists)

<dl> <dt> <dd>

<dl> <dt> <dd>
列表容器 列表項目 項目說明
<dl>
  <dt>項目名稱</dt>
  <dd>項目說明</dd>
</dl>

<dl>
  <dt>水果</dt>
  <dd>蘋果、檸檬、橘子</dd>
</dl>

https://ithelp.ithome.com.tw/upload/images/20230924/20163257UkRHNmvfxD.jpg

資料來源:Html語法


上一篇
Day8-Html標題段落圖片超連結
下一篇
Day10-Html語意標籤
系列文
30天前端學習筆記心得34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言